<template>
  <!-- 司机考勤明细 -->
  <div class="TripsNumber">
    <div class="trip_table" v-show="isMerge">
      <div class="table">
        <BasicTable :column="column" :tableData="tableData" :isSelect="false" @select="ChangeSelect" @rowClick="rowClick"
          isRowRight :rightMenu="rightMenu" :isShowSerial="false">
        </BasicTable>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue';
import BasicTable from '@/components/BasicTable/BasicTable.vue'
import { getDriverSignList } from '@/api/dispatch/routeLine.js'


const isMerge = ref(true)
const isSearch = ref(false)
const table_height = ref('356px')
watch(isSearch, () => {
  table_height.value = '356px'
  if (isSearch.value) table_height.value = '306px'
})
const ChangeSelect = (val) => {
  console.log(val, '当前选中的数据');
}
const rowClick = (row) => {
  console.log(row, '点击的当前行的数据');
}

// 列配置
const column = ref([  
  {
    prop: 'driverName',
    label: '司机'
  },
  {
    prop: 'plateNo',
    label: '刷卡车辆'
  },
  {
    prop: 'signTime',
    label: '刷卡时间'
  },
  {
    prop: 'signOutTime',
    label: '刷卡类型'
  },  
])
// 右键菜单
const rightMenu = ref([
  {
    content: '查看车辆',
    methods: (e) => {
      console.log(e, '查看车辆');
    },
  },
  {
    content: '修改车辆状态',
    children: [
      {
        content: '在线',
        methods: (e) => {
          console.log(e, '设置在线状态');
        },
      },
      {
        content: '修改离线状态',
        methods: (e) => {
          console.log(e, '设置离线状态');
        },
      }
    ]
  }
])

// 表格数据
const tableData = ref([])
const route = useRoute()
onMounted(() => {
  getDriverSignList().then(res => {
    console.log('这个是司机考勤明细表',res);
    if(res.code===200){
      tableData.value=res.data       
    }   
  })
})

</script>

<style lang="scss" scoped>
@import './assets/black_table.scss';

:deep(.el-checkbox) {
  align-items: normal;
  padding-top: 8px;
}


.trip_table {
  padding: 0 20px;


  .table {
    padding:20px 0px 10px;
    height: v-bind(table_height);
    // pad-: ;
  }
}
</style>